<template>
    <div class="app-container">
      <el-row :gutter="20">
        <el-col :span="5">
          <div style="border:1px solid #eee;min-height:calc(100vh - 150px);padding:20px 10px;min-width: 200px;max-height: 600px;overflow-y: auto">
             <div class="customer-setting-type">
                 <div class="type-item" :class="{'active': activeIndex == -1}" @click="changeCdtId(-1,'')">全部</div>
                 <div class="type-item" :class="{'active': activeIndex == index}" v-for="(item,index) in goodsLineList" @click="changeCdtId(index,item)">{{item}}</div>
             </div>
          </div>
        </el-col>
        <el-col :span="19" >
          <div style="overflow: hidden">
            <el-form :inline="true" :model="listQuery" size="mini" label-width="100px">
              <el-form-item label="关键字：">
                <el-input v-model="listQuery.keyword" placeholder="规格型号，厂家" style="width:250px"></el-input>
              </el-form-item>
              <el-form-item label="是否为常用：">
                <el-select v-model="listQuery.isCommonGrades" clearable>
                  <el-option :value="1" label="是"></el-option>
                  <el-option :value="0" label="否"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button
                  @click="handleSearchList()"
                  type="primary">
                  查询
                </el-button>
                <el-button
                  @click="handleSearchList()"
                  type="primary">
                  同步金蝶
                </el-button>
              </el-form-item>
            </el-form>
          </div>
          <el-table ref="advertisementTable"
                    :data="list"
                    style="width: 100%;margin-top:20px"
                    v-loading="listLoading" border>
            <el-table-column label="代码" align="center">
              <template slot-scope="scope">
                    {{scope.row.kgId}}
              </template>
            </el-table-column>
            <el-table-column label="品名" align="center">
              <template slot-scope="scope">
                {{scope.row.goodsClass}}
              </template>
            </el-table-column>
            <el-table-column label="规格型号" align="center">
              <template slot-scope="scope">
                {{scope.row.goodsSn}}
              </template>
            </el-table-column>
            <el-table-column label="厂家" align="center">
              <template slot-scope="scope">
                 {{scope.row.goodsPlace}}
              </template>
            </el-table-column>
            <el-table-column label="常用牌号"  align="center">
              <template slot-scope="scope">
                <el-switch
                  @change="changeStatus(scope.row)"
                  v-model="scope.row.isCommonGrades"
                  :active-value="1"
                  :inactive-value="0">
                </el-switch>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-container">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              layout="total, sizes,prev, pager, next,jumper"
              :page-size="listQuery.pageSize"
              :page-sizes="[10,15,20]"
              :current-page.sync="listQuery.pageNum"
              :total="total">
            </el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>
</template>

<script>
  import {goodskingGoodsList,goodsCommonKingGoods,kingGoodsClassList} from '@/api/partner'
  import {validateInt} from '@/utils/validate';
  import store from '@/store'
  const defaultItem = {
      "cdtId":'',
      "cddValue": "",
      "status": 1,
      "sortIndex": 0
  };
  const defaultListQuery = {
    goodsClass:'',
    keyword:null,
    isCommonGrades:'',
    pageNum: 1,
    pageSize: 10,
  };
    export default {
      name: "customerSetting",
      data() {
          const isValidateInt = (rule, value, callback) => {
              if (!validateInt(value)) {
                  callback(new Error('请输入正整数'))
              } else {
                  callback()
              }
          };
        return {
          roles:store.getters.roles ? store.getters.roles : [],
          list:[],
          listLoading:true,
          activeIndex:-1,
          listQuery:JSON.parse(JSON.stringify(defaultListQuery)),
          total:0,
          goodsLineList:[]
        }
      },
      created(){
          this.getList();
          this.getkingGoodsClassList();
      },
      filters: {
      },
      methods: {
        //获取客户配置
        getkingGoodsClassList(){
          kingGoodsClassList().then((res)=>{
            this.goodsLineList = res

          })
        },
        //获取列表
        getList(){
          this.listLoading = true;
           goodskingGoodsList(this.listQuery).then((res)=>{
              this.list = res.list;
              this.total = res.count;
              this.listLoading = false;
          }).catch(()=>{
              this.listLoading = false;
          });
        },

        //改变查看页数
        handleSizeChange(val) {
          this.listQuery.pageNum = 1;
          this.listQuery.pageSize = val;
          this.getList();
        },

        //改变页码
        handleCurrentChange(val) {
          this.listQuery.pageNum = val;
          this.getList();
        },

        //搜索
        handleSearchList(){
          this.listQuery.pageNum = 1;
          this.getList();
        },

        //切换配置项
        changeCdtId(index,item){
            this.activeIndex = index
            this.listQuery.goodsClass = item;
            this.handleSearchList()
        },



        //修改状态
        changeStatus(item){
            console.log("item",item)
            let msg = item.isCommonGrades == 1 ? '确认将此商品变为常用牌号？' : '确认取消此商品的常用牌号设置？'
            this.$confirm(msg, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              let data = {}
              data.kgId = item.kgId
              data.isCommonGrades = item.isCommonGrades
              goodsCommonKingGoods(data).then(()=>{
                this.$message({
                  type: 'success',
                  message: '操作成功'
                });
                this.getList();
              })
            }).catch(() => {
                item.isCommonGrades = item.isCommonGrades  == 1 ? 2 :1
            });

        },
      },

    }
</script>

<style scoped lang="scss">
    .recordItem{
      font-size:12px;
      margin-bottom:10px;
      .time{
        display: inline-block;
        width:120px;
        vertical-align: top;
      }
      .text{
        display: inline-block;
        vertical-align: top;
        width:calc(100% - 170px);
      }
    }
    .img-div{
      font-size:12px;
      color:#666;
      display: inline-block;
      border:1px dashed #eee;
      padding:10px;
      border-radius: 5px;
      margin-right:10px;
      cursor: pointer;
      img{
        width:100px;
        height:64px;
        object-fit: contain;
      }
      .text{
        height:20px;
        line-height: 20px;
      }
    }
    .customer-setting-type{
        .type-item{
          line-height: 36px;
          font-size:14px;
          cursor: pointer;
          text-align: center;
        }
        .type-item.active{
          background: #ebf2fd;
        }
        .type-item:hover{
          background: #F5F7FA;
        }
        .type-item.active:hover{
          background: #e7f1ff;
        }
    }
</style>
